<template>
  <div class="home-main">
    <div class="main-top">
      <el-input :style="{ width: '200px' }" placeholder="书名搜索" v-model="search"></el-input>
      <el-button type="primary" @click="handleSearch"> 搜索 </el-button>
      <el-button type="primary" @click="handleCancle"> 重置</el-button>

      <el-button type="primary" @click="handleAdd"> 新增 </el-button>
    </div>

    <el-table :data="bookData" stripe border>
      <el-table-column align="center" header-align="center" type="index" label="序号" width="120" />
      <el-table-column
        align="center"
        header-align="center"
        prop="bookName"
        label="书名"
        width="120"
      />
      <el-table-column align="center" header-align="center" prop="address" label="地址" />
      <el-table-column align="center" header-align="center" prop="price" label="价格" width="120" />
      <el-table-column align="center" header-align="center" prop="stock" label="库存" width="120" />
      <el-table-column align="center" header-align="center" prop="shopMsg" label="信息" />
      <el-table-column align="center" header-align="center" fixed="right" label="操作" width="120">
        <template v-slot="scope">
          <el-button link type="primary" size="small" @click="handleEdit(scope.row)"
            >编辑
          </el-button>
          <el-button link type="danger" size="small" @click="handleDelete(scope.row.id)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <BookDialog
    :value="showBookDialog"
    @input="closeBookDialog"
    @updateBooksData="updateBooksData"
    :bookItemData="bookItemData"
    :isEdit="isEdit"
  ></BookDialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import BookDialog from './book/BookDialog.vue'
import { getBooksData, deleteBooksData } from '@/mock/api/index.ts'

const bookData = ref([])
async function getData () {
  const res = await getBooksData()
  bookData.value = JSON.parse(JSON.stringify(res.data.data))
  // console.log('bookData.value', bookData.value)
  originalData.value = JSON.parse(JSON.stringify(res.data.data))
}
getData()
const isEdit = ref(false)
const showBookDialog = ref(false)
const bookItemData = ref([])
const handleAdd = () => {
  isEdit.value = false
  showBookDialog.value = true
  bookItemData.value = []
}
const handleDelete = async id => {
  // console.log('id', id)
  const res = await deleteBooksData({ id })
  // console.log('删除之后', res)
  bookData.value = res.data
}
const handleEdit = row => {
  isEdit.value = true
  showBookDialog.value = true
  bookItemData.value = row
  // console.log('打开弹框', row)
}

const closeBookDialog = event => {
  showBookDialog.value = event
  // console.log('弹框状态', showBookDialog.value)
}
const updateBooksData = data => {
  bookData.value = data
  originalData.value = JSON.parse(JSON.stringify(bookData.value))
}

const originalData = ref([])

// 搜索
const search = ref('')
const handleSearch = () => {
  // console.log(search.value)
  const data = JSON.parse(JSON.stringify(bookData.value))
  if (search.value) {
    const result = data.filter(item => item.bookName.includes(search.value))
    // console.log(result)
    bookData.value = result
  } else {
    bookData.value = originalData.value
  }
}
const handleCancle = () => {
  search.value = ''
  bookData.value = originalData.value
}
</script>

<style scope>
.home-main {
  background-color: pink;
  height: 100vh;
  padding: 15px;
}
.main-top {
  display: flex;
  margin-bottom: 15px;
}

@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
